<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<link rel="stylesheet" type="text/css"
	href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
	src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<g:set var="entityName"
	value="${message(code: 'local.label', default: 'Local')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
	<table id="dg" title="Catalogo de Locales" class="easyui-datagrid"
		style="width: 960px; height: 470px" url="${createLink(action:'list')}"
		toolbar="#toolbar" pagination="true" rownumbers="true"
		fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="nombre" width="25">Nombre</th>
				<th field="descripcion" width="40">Descripcion</th>
				<th field="habilitado" width="10">Habilitado</th>
				<th field="locatario_nombre_completo" width="25">Locatario</th>
				<th field="fechaRegistro" width="20">Fecha de Registro</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-add" plain="true" onclick="agregar()">Nuevo</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editar()">Editar</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="eliminar()">Eliminar</a>
	</div>

	<div id="dlg" class="easyui-dialog"
		style="width: 450px; height: 400px; padding: 5px 10px" closed="true"
		buttons="#dlg-buttons">
		<form id="fm" method="post" novalidate enctype="multipart/form-data">
			<div class="ftitle">Local</div>
			<input name="id" hidden="true"> <input name="version"
				hidden="true">
			<div class="fitem">
				<label>Nombre:</label> <input name="nombre"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Descripcion:</label> <input type="text" name="descripcion">
			</div>
			<div class="fitem">
				<label>Habilitado:</label> <input type="checkbox" name="habilitado"
					value="true">
			</div>
			<div class="fitem">
				<label>Imagen:</label><input type="file" name="img"
					accept="image/*" class="easyui-fileupload">
			</div>
			<div class="ftitle">Locatario</div>
			<div class="fitem">
				<label>Usuario:</label> <input type="text" name="username"
					required="required">
			</div>
			<div class="fitem">
				<label>Password:</label> <input type="password" name="password"
					required="required">
			</div>
			<div class="fitem">
				<label>Email:</label> <input name="email" class="easyui-validatebox"
					data-options="required:true,validType:'email'">
			</div>

			<div class="fitem">
				<label>Nombre:</label> <input type="text" name="locatario_nombre"
					required="required">
			</div>
			<div class="fitem">
				<label>Apellidos:</label> <input type="text"
					name="locatario_apellidos" required="required">
			</div>
			<div class="fitem">
				<label>Dirección:</label> <input type="text"
					name="locatario_direccion" >
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-ok" onclick="guardar()">Guardar</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancelar</a>
	</div>
	<script type="text/javascript">
    	var url;
        function agregar(){
            $('#dlg').dialog('open');
            $('#fm').form('clear');
        }
        function editar(){
        	$('#fm').form('clear');
            var row = 'show/' + $('#dg').datagrid('getSelected').id;
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','Edit User');
                $('#fm').form('load',row);
            }
        }
        function guardar(){
            $('#fm').form('submit',{
                url: 'save',
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                    }
                }
            });
        }
        function eliminar(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Esta seguro que desea eliminar este Local?',function(r){
                    if (r){
                        $.post('delete',{id:row.id},function(result){
                            if (result.success){
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                               event.preventDefault();
                            }
                        },'json');
                    }
                });
            }
        }
    </script>

	<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}
</style>
</body>
</html>